
@import "../../../css/theme.styl"

.detail-buy
    width: 100%;
    padding-top 30px;
    //左边
    .product-img
        width: 560px;
        height 560px;
        float: left;
        position relative
        .swiper-detail-buy
            .swiper-wrapper
                .product-img-item
                    width 560px;
                    height 560px;
            .swiper-pagination
                .swiper-pagination-bullet
                    display: inline-block
                    width 50px;
                    height 2px;
                    background #ccc;
                    border-radius 0 !important;
        .swiper-detail-swiper-btn
            position absolute
            top: 50%;
            transform: translateY(-50%)
            font-size: 12px !important
            z-index: 999;
            width: 40px;
            height 80px;
            line-height:80px;
            text-align: center;
            cursor pointer
            color #e0e0e0;
            overflow hidden
            .iconfont
                font-size:36px;
            &:hover
                color #fff
                background #999;
        .swiper-detail-buy-prev
            left:0
        .swiper-detail-buy-next
            right:0


    //右边
    .product-buy-select
        width: 600px;
        float: right;
        p
            margin-top:10px;
        .title
            font-size: 24px;
            font-weight: 400;
            color: #212121;
        .func-desc
            line-height:1.25
            color #b0b0b0;
        .price
            margin-top 20px;
            .price-now
                color $themecolor
                font-size: 18px;
            .price-pre
                margin-left 10px;
                font-size:14px;
                color $themegraytext
        .line
            margin-top: 20px;
        .address
            margin-top 20px;
            background $themegray
            padding 20px;
            position: relative;
            .iconfont
                position: absolute;
                font-size:28px;
                left 20px;
                top 20px;
            .address-detail
                margin-left 40px;
                line-height: 1.5
                span
                    margin-left 10px;
        .sub-title
            font-size: 18px;
            color: #333;
            margin-top 25px;
            .know-accident
                font-size 14px;
                color:$themecolor;
                float right
                cursor pointer
        .select-box
            margin-top:15px;
            width: 100%;
            display:flex;
            justify-content:space-between;
            align-items:center;
            flex-wrap: wrap;
            .item
                width:300px;
                height:40px;
                line-height: 40px;
                text-align: center;
                margin-bottom 10px;
                box-sizing: content-box;
                border : 1px solid #e0e0e0;
                transition: border .25s;
                &:hover
                    cursor pointer
                    border : 1px solid $themecolor
            .select-item
                border : 1px solid $themecolor
        .accident-content
            margin-top:20px;
            .item:last-child
                border-bottom: 1px solid #e0e0e0;
            .item
                width: 100%;
                height:120px;
                padding:10px;
                box-sizing: content-box
                border-top : 1px solid #e0e0e0;
                border-left : 1px solid #e0e0e0;
                border-right : 1px solid #e0e0e0;
                position: relative;
                .item-checkbox
                    position absolute
                    left 20px;
                    top 30px;
                .item-icon
                    display inline-block
                    position absolute
                    left 40px;
                    top 20px;
                    width:50px
                    height 50px;
                .accident-price
                    position absolute
                    right  22px;
                    bottom 28px;
                    color #757575;
                .item-content
                    display: inline-block
                    line-height:1.5
                    margin-left: 90px;
                    .title
                        display inline-block
                        font-size: 18px;
                        font-weight: 700
                        .price
                            color #fff
                            font-size: 14px;
                            padding 2px 6px;
                            background $themecolor
                            border-radius: 10px;
                            vertical-align:middle;
                    .condition
                        color $themegraytext
                    .accident-price
                        float right
                        color $themegraytext;
                    .question
                        span
                            margin 0 3px;
        
        .total
            background $themegray
            padding:30px
            margin-top 30px;
            color #616161
            .total-title
                .total-title-price
                    float right
            .total-service
                .total-service-price
                    float right
            .count
                font-size: 24px;
                margin-top: 20px;
                color $themecolor
        
        .shopcar
            margin-top: 30px;
            .shopcar-item
                display: inline-block
                height:54px;
                line-height:54px;
                margin-right 10px;
                color #fff;
                cursor pointer
            .shopcar-btn
                background $themecolor
                padding:0px 100px;
                &:hover
                    background #f25807;
            .fav-btn
                background #b0b0b0;
                padding:0px 50px;
                .iconfont
                    margin-right: 5px;
                &:hover
                    background #757575;

        .btn-box
            margin-top: 20px;
            .btn-item
                margin: 0 5px;
                color $themegraytext
                line-height:1.5
                .iconfont
                    font-size 20px;

